<template>
	<view>
		<button type="default" @click="showFolder()" style="font-size: 14px;">
			{{currentTypeName}}<uni-icons type="bottom" size="18" color="#999"></uni-icons>
		</button>
		
		<!-- 文件夹列表弹出层 -->
		<uni-drawer ref="showFolderDrawer" mode="right" :mask-click="true" >
			<scroll-view class="scroll-view-box" scroll-y="true" @touchmove.stop>
				<view class="container">
					<button type="default" size="mini" @click="showCreateFolderDialog()" style="font-size: 14px;">
						新建
					</button>
					<uni-swipe-action>
						<uni-swipe-action-item  v-for="(item,index) in noteTypes" :key="index">
							<view class="content-box" @click="chooseType(item.nt_id,item.nt_name)">
								<text class="content-text">{{item.nt_name}}</text>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</scroll-view>
		</uni-drawer>
		<!-- 新建文件夹输入框 -->
		<uni-popup ref="createFolderDialog" type="dialog">
			<uni-popup-dialog  mode="input" title="新建文件夹" 
				placeholder="" 
				@confirm="doCreateFolderDialog" 
				@close="closeFolderDialog"
				:before-close="true"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {getNoteTypes,saveNoteType,recycleNoteType,updateNoteType} from '@/api/noteType.js'
	
	export default {
		data() {
			return {
				noteTypes:[],
				currentTypeName:this.typeName,
				currentTypeId:this.typeId,
				showFolderInfo:{ // 编辑文件夹名称
					id:"",
					name:"", 
				}
				
			};
		},
		props:['typeId','typeName'],
		mounted(){
			this.getNoteTypesOnly()
		},
		watch:{
			typeId:function(newValue,oldValue){
				this.currentTypeId = this.typeId
			},
			typeName:function(newValue,oldValue){
				this.currentTypeName = this.typeName
			}
		},
		methods: {
			/**
			 * 只获取分类
			 */
			getNoteTypesOnly(){
				getNoteTypes().then( res => {
					// console.log("noteTypes:",res)
					this.noteTypes = res.data
				})
			
			},
			// 显示文件夹列表弹出层
			showFolder(){
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.showFolderDrawer.open()
			},
			delTypeById(id){
				// console.log("id:",id)
				recycleNoteType(id).then( res => {
					if(res.code == 0){
						this.getNoteTypesOnly()
					}else{
						
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			/**
			 * 选择分类
			 * @param {Object} id
			 * @param {Object} name
			 */
			chooseType(id,name){
				this.currentTypeId = id
				this.currentTypeName = name
				this.$refs.showFolderDrawer.close()
				this.$emit("changeType",this.currentTypeId,this.currentTypeName)
			},
			/**
			 * 显示创建文件夹对话框
			 */
			showCreateFolderDialog(){
				
				this.$refs.showFolderDrawer.close()
				this.$refs.createFolderDialog.open()
			},
			/**
			 * 点击创建文件夹窗口的【确定】按钮
			 */
			doCreateFolderDialog(val){
				if(val === ""){
					uni.showToast({
						icon: 'none',
						title: "请输入文件夹名"
					})
					return
				}
				saveNoteType(val).then( res =>{
					if(res.code == 0){
						
						this.getNoteTypes()
						this.$refs.createFolderDialog.close()
						this.$refs.showFolderDrawer.open()
					}else{
						
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			/**
			 * 关闭创建文件夹窗口
			 */
			closeFolderDialog(){
				this.$refs.createFolderDialog.close()
				this.$refs.showFolderDrawer.open()
			},
			/**
			 * 获取分类、然后获取当前笔记
			 * 初始化用
			 */
			getNoteTypes(){
				getNoteTypes().then( res => {
					// console.log("noteTypes:",res)
					this.noteTypes = res.data
				})
			
			},
		},
	};
</script>

<style lang="scss">
	.container {
		padding: 10px;
	}
	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.example-body {
		padding: 10px;
	}
	
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}
	
	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	
	.content-text {
		font-size: 15px;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}
	
	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}
	
	.button-text {
		font-size: 15px;
	}
	
	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}
	.edit-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #007aff
	}
	
	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>